<template>

    <div class="comprehensiveTabel">
        <GeneralTabel 
            v-loading="isLoading"
            v-model:formArr="formArr" 
            v-model:formDataNew="formDataNew" 
            v-model:formDataOriginal="formDataOriginal" 
            v-model:isFoldNum="isFoldNum" 
            @tabelSearch="tabelSearch" 
            v-model:buttonArr="buttonArr" 
            v-model:tabArr="tabArr" 
            v-model:tabActiveName="tabActiveName" 
            @tabChange="tabChange" 
            v-model:tableObj="tableObj" 
            v-model:paginationObj="paginationObj" 
            v-model:dialogObj="dialogObj"
        />
    </div>
</template>

<script lang="ts" setup>
    import { ref, shallowRef, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { welfareorgsGetWelfareOrgsListApi, welfareorgsGetWelfareOrgsListCustomizeExportApi } from '@/apis'
    import { isIDCard, dateFormatter, downloadExcelFromBase64 } from '@/utils'
    import {  } from '@/constants'
    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import { ElMessage, ElMessageBox  } from 'element-plus'
    import {
        Lock,
        User,
        Monitor,
        Phone,
        Search,
        RefreshRight,
        Plus,
        UploadFilled,
        Delete,
        Edit,
        View
    } from '@element-plus/icons-vue'
    import GeneralTabel from '@/components/generalTabel/GeneralTabel.vue'
    import InstitutionalChildListEdit from '@/views/childWelfareInstitutions/institutionalChildList/components/institutionalChildListEdit/InstitutionalChildListEdit.vue'
    import InstitutionalChildListView from '@/views/childWelfareInstitutions/institutionalChildList/components/institutionalChildListView/InstitutionalChildListView.vue'
    import InstitutionalChildListCancel from '@/views/childWelfareInstitutions/institutionalChildList/components/institutionalChildListCancel/InstitutionalChildListCancel.vue'

    const route = useRoute()
    const router = useRouter()
    const store = useStore()
	const avatarImage = new URL('@/assets/img//404.png', import.meta.url).href
    // const avatarImage: Raw<any[]> = markRaw([new URL('@/assets/img/avatar/avatar.png', import.meta.url).href])
    const dialogObj: Ref<any> = ref({
        dialogTitle: false, //dialog标题
        dialogVisible: false, //dialog显示
        dialogComponent: '', //组件
        dialogParams: {}, //组件参数
    })
    const isLoading: Ref<boolean> = ref(false) //
    const isFoldNum: Ref<number> = ref(10) //第几个开始折叠，可以不用给值，有默认值
        
    const formArr: Ref<any[]> = ref([
        {
            fieldName: 'divisionCodes', //字段
            fieldValue: [], //字段默认值
            fieldText: '行政区划', //字段文字
            fieldType: 'administrativeDivisionsCascader', //类型 input select date cascader administrativeDivisionsCascader(行政区划特殊选项)
            fieldDisabled: false, //是否禁用
            fieldRules: [ //规则
                // { 
                //     required: true, 
                //     message: '请选择！', 
                //     trigger: 'blur' 
                // }
            ],
        },
        {
            fieldName: 'date', //字段
            fieldValue: dateFormatter(new Date()), //字段默认值  date year month是 '' daterange monthrange yearrange是[]
            fieldText: '日期', //字段文字
            fieldType: 'date', //类型 input select date cascader
            fieldDisabled: false, //是否禁用
            fieldRules: [ //规则
                // { 
                //     required: true, 
                //     message: '请选择日期！', 
                //     trigger: 'blur' 
                // }
            ],
            // date选项框
            dateValueFormat: 'YYYY-MM-DD', //绑定值的格式YYYY-MM-DD
            dateType: 'date', //类型 date year month daterange monthrange yearrange
            dateDefaultValue: '', //默认值 new Date(2010, 9, 1)
            // dateDisabledDate: (time) => {
            //     return time.getTime() > Date.now()
            // }
        },
    ])
    // formDataNew不用给值，里面会根据formArr的值来赋值，只是用作其他查询需要值，这个值在不点查询的情况也会根据输入框的改变而改变，所以除了点击查询以外用formDataOriginal
    const formDataNew: Ref<any> = ref({

    })
    const formDataOriginal: Ref<any> = ref({

    })
    // currentTab和tabsArr有需要的情况下，比如打开新路由页面，然后保存需要关闭当前页面并且把tabs切换了
    const currentTab = defineModel<any>('currentTab', {
        required: false,
        default: {
        }
    })
    const tabsArr = defineModel<any>('tabsArr', {
        required: false,
        default: {
        }
    })
    
   
    // 删除多个表格有tableSelection
    const buttonArr: Ref<any[]> = ref([
        {
            buttonType: 'primary', //类型
            buttonPlain: false, //是否为朴素按钮
            buttonRound: false, //是否为圆角按钮
            buttonCircle: false, //是否为圆形按钮
            buttonIcon: '', //图标组件
            buttonDisabled: false, //按钮是否为禁用状态
            buttonLink: false, //是否为链接按钮
            buttonText: false, //是否为文字按钮
            buttonBg: false, //是否显示文字按钮背景颜色
            buttonLoading: false, //是否为加载中状态
            buttonLoadingIcon: '', //自定义加载中状态图标组件
            buttonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色	
            buttonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
            buttonMainText: '导出excel', //按钮文字
            buttonClick: () => { //按钮事件
                // 调接口
                welfareorgsGetWelfareOrgsListCustomizeExportApi(formDataOriginal.value).then((res: any) => {
                    downloadExcelFromBase64( res.data, route.meta.title)
                })
            }
        },
        // {
        //     buttonType: 'danger', //类型
        //     buttonPlain: false, //是否为朴素按钮
        //     buttonRound: false, //是否为圆角按钮
        //     buttonCircle: false, //是否为圆形按钮
        //     buttonIcon: Delete, //图标组件
        //     buttonDisabled: false, //按钮是否为禁用状态
        //     buttonLink: false, //是否为链接按钮
        //     buttonText: false, //是否为文字按钮
        //     buttonBg: false, //是否显示文字按钮背景颜色
        //     buttonLoading: false, //是否为加载中状态
        //     buttonLoadingIcon: '', //自定义加载中状态图标组件
        //     buttonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色	
        //     buttonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
        //     buttonMainText: '删除', //按钮文字
        //     buttonClick: () => { //按钮事件 
        //         console.log('按钮事件')
        //     }
        // },
    ])
    const tabArr: Ref<any[]> = ref([
        // {
        //     tabLabel: '第一个', //选项卡标题
        //     tabName: '第一个', //与选项卡绑定值 value 对应的标识符，表示选项卡别名。默认值是tab面板的序列号，如第一个 tab 是 0
        //     tabDisabled: false, //是否禁用
        //     badgeValue: 0, //显示值
        //     badgeMax: 99, //最大值，超过最大值会显示 {max}+。 只有当 value 是数字类型时起作用。
        //     badgeIsDot: false, //是否显示小圆点。
        //     badgeHidden: false, //是否隐藏 Badge。
        //     badgeType: 'danger', //badge type.
        //     badgeShowZero: true, //值为零时是否显示 Badge
        //     badgeColor: '', //背景色
        //     badgeOffset: [10, 0], //badge 的偏移量
        // },
        // {
        //     tabLabel: '第二个', //选项卡标题
        //     tabName: '第二个', //与选项卡绑定值 value 对应的标识符，表示选项卡别名。默认值是tab面板的序列号，如第一个 tab 是 0
        //     tabDisabled: false, //是否禁用
        //     badgeValue: 0, //显示值
        //     badgeMax: 99, //最大值，超过最大值会显示 {max}+。 只有当 value 是数字类型时起作用。
        //     badgeIsDot: false, //是否显示小圆点。
        //     badgeHidden: false, //是否隐藏 Badge。
        //     badgeType: 'danger', //badge type.
        //     badgeShowZero: true, //值为零时是否显示 Badge
        //     badgeColor: '', //背景色
        //     badgeOffset: [10, 0], //badge 的偏移量
        // },
    ])
    const tabActiveName: Ref<string> = ref('')
    
    const tableObj: Ref<any> = ref({
        tableData: [
 
        ],
        tableColumn: [
            {
                tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '50', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'selection', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [ //多级表头需要
                    
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '序号', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '100', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'index', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [ //多级表头需要
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'welfare_org_id', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '行政区划', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [ //多级表头需要
                   
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: 'ss_org_id', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '机构名称', //显示的标题
                // tableWidth: '100', //对应列的宽度
                tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [ //多级表头需要
                   
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '床位数', //显示的标题
                // tableWidth: '100', //对应列的宽度
                // tableMinWidth: '400', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [ //多级表头需要
                    {
                        tableProp: 'gender1',
                        tableLabel: '规划床位数',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                    {
                        tableProp: 'gender2',
                        tableLabel: '核定床位数',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '工作人员', //显示的标题
                // tableWidth: '100', //对应列的宽度
                // tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [ //多级表头需要
                    {
                        tableProp: 'gender3',
                        tableLabel: '工作人员总数',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                    {
                        tableProp: '',
                        tableLabel: '在编人员',
                        // tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                        tableChildren: [ //多级表头需要
                            {
                                tableProp: 'gender4',
                                tableLabel: '其中在编人员总数',
                                tableMinWidth: '200',
                                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                            },
                            {
                                tableProp: 'gender5',
                                tableLabel: '管理岗位',
                                tableMinWidth: '200',
                                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                            },
                            {
                                tableProp: 'gender6',
                                tableLabel: '专业技术岗位',
                                tableMinWidth: '200',
                                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                            },
                            {
                                tableProp: 'gender7',
                                tableLabel: '工勤岗位',
                                tableMinWidth: '200',
                                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                            },
                        ],
                    },
                    {
                        tableProp: '',
                        tableLabel: '非在编人员',
                        // tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                        tableChildren: [ //多级表头需要
                            {
                                tableProp: 'gender8',
                                tableLabel: '临聘人员',
                                tableMinWidth: '200',
                                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                            },
                            {
                                tableProp: 'gender9',
                                tableLabel: '公益岗位',
                                tableMinWidth: '200',
                                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                            },
                            {
                                tableProp: 'geneder10',
                                tableLabel: '其他',
                                tableMinWidth: '200',
                                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                            },
                        ],
                    },
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '职业岗位', //显示的标题
                // tableWidth: '100', //对应列的宽度
                // tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [ //多级表头需要
                    {
                        tableProp: 'zhiyegangwei1',
                        tableLabel: '医生',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                    {
                        tableProp: 'zhiyegangwei2',
                        tableLabel: '康复医师',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                    {
                        tableProp: 'zhiyegangwei3',
                        tableLabel: '护士',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                    {
                        tableProp: 'zhiyegangwei4',
                        tableLabel: '康复治疗师',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                    {
                        tableProp: 'zhiyegangwei5',
                        tableLabel: '营养配餐师',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                    {
                        tableProp: 'zhiyegangwei6',
                        tableLabel: '社会工作者',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                    {
                        tableProp: 'zhiyegangwei7',
                        tableLabel: '护理员',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                    {
                        tableProp: 'zhiyegangwei8',
                        tableLabel: '孤残儿童护理员',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '医疗情况', //显示的标题
                // tableWidth: '100', //对应列的宽度
                // tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [ //多级表头需要
                    {
                        tableProp: 'yiliao1',
                        tableLabel: '内设医疗机构名称',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                    {
                        tableProp: 'yiliao2',
                        tableLabel: '是否取得执业许可证',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                    {
                        tableProp: 'yiliao3',
                        tableLabel: '开通绿色通道的合作医疗机构名称',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '定点康复情况', //显示的标题
                // tableWidth: '100', //对应列的宽度
                // tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [ //多级表头需要
                    {
                        tableProp: 'dingdian1',
                        tableLabel: '定点康复机构名称',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                    {
                        tableProp: 'dingdian2',
                        tableLabel: '服务的残疾类型',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                    {
                        tableProp: 'dingdian3',
                        tableLabel: '初次认定时间',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                    {
                        tableProp: 'dingdian4',
                        tableLabel: '康复医师数量',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                    {
                        tableProp: 'dingdian5',
                        tableLabel: '康复治疗师数量',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            {
                tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
                tableLabel: '纳入特教系统情况', //显示的标题
                // tableWidth: '100', //对应列的宽度
                // tableMinWidth: '200', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
                tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
                tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
                tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
                tableChildren: [ //多级表头需要
                    {
                        tableProp: 'narutejiaoxitong1',
                        tableLabel: '教育模式',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                    {
                        tableProp: 'narutejiaoxitong2',
                        tableLabel: '特教老师人数',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                    {
                        tableProp: 'narutejiaoxitong3',
                        tableLabel: '其中编制特教老师人数',
                        tableMinWidth: '200',
                        tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
                        tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
                    },
                ],
                tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            },
            // {
            //     tableProp: '', //字段名称 对应列内容的字段名， 也可以使用 property属性
            //     tableLabel: '操作', //显示的标题
            //     // tableWidth: '100', //对应列的宽度
            //     tableMinWidth: '300', //对应列的最小宽度， 对应列的最小宽度， 与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列
            //     tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
            //     tableFixed: 'right', //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
            //     tableType: 'default', //对应列的类型。 如果设置了selection则显示多选框； 如果设置了 index 则显示该行的索引（从 1 开始计算）； 如果设置了 expand 则显示为一个可展开的按钮
            //     tableAlign: 'left', //对齐方式'left' | 'center' | 'right'
            //     tableHeaderAlign: 'left', //表头对齐方式， 若不设置该项，则使用表格的对齐方式'left' | 'center' | 'right'
            //     tableChildren: [ //多级表头需要
            //         // {
            //         //     tableProp: 'gender',
            //         //     tableLabel: 'Gender',
            //         //     tableWidth: '300',
            //         //     tableShowOverflowTooltip: true, //当内容太长时，它会分成多行。您可以使用 show-overflow-tooltip 将其保留在一行中。属性 show-overflow-tooltip 接受一个布尔值。 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
            //         //     tableFixed: false, //它接受 Boolean 值。 如果为 true, 列将被左侧固定. 它还接受传入字符串，left 或 right，表示左边固定还是右边固定。
            //         // },
            //     ],
            //     tableSortable: false, //在列中设置 sortable 属性即可实现以该列为基准的排序， 接受一个 Boolean，默认为 false。 可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。
            //     // tableFilters: [ //数据过滤的选项， 数组格式，数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。
            //     //     // { text: 'Home', value: 'Home' },
            //     //     // { text: 'Office', value: 'Office' },
            //     // ],
            //     // tableFilterMethod: (value, row, column) => { //数据过滤使用的方法， 如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。
            //     //     const property = column['property']
            //     //     return row[property] === value
            //     // },
            //     // tableFilterPlacement: 'bottom-end', //过滤弹出框的定位'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
            //     tableContentType: 'button', //column定制内容类型
            //     tableContentButtons: [ // //column定制按钮
            //         {
            //             tableContentButtonType: 'primary', //按钮类型
            //             tableContentButtonPlain: false, //是否为朴素按钮
            //             tableContentButtonRound: false, //是否为圆角按钮
            //             tableContentButtonCircle: false, //是否为圆形按钮
            //             tableContentButtonIcon: View, //图标组件
            //             tableContentButtonDisabled: false, //按钮是否为禁用状态
            //             tableContentButtonText: false, //是否为文字按钮
            //             tableContentButtonLink: false, //是否为链接按钮
            //             tableContentButtonBg: false, //是否显示文字按钮背景颜色
            //             tableContentButtonLoading: false, //是否为加载中状态
            //             tableContentButtonLoadingIcon: '', //自定义加载中状态图标组件
            //             tableContentButtonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色	
            //             tableContentButtonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
            //             tableContentButtonMainText: '查看', //按钮文字
            //             tableContentButtonClick: (val) => {
            //                 dialogObj.value.dialogVisible = true
            //                 dialogObj.value.dialogComponent = InstitutionalChildListView
            //                 dialogObj.value.dialogParams = {
            //                     id: val.row.id
            //                 }
            //                 dialogObj.value.dialogTitle = '查看'

            //             },
            //         },
            //         {
            //             tableContentButtonType: 'primary', //按钮类型
            //             tableContentButtonPlain: false, //是否为朴素按钮
            //             tableContentButtonRound: false, //是否为圆角按钮
            //             tableContentButtonCircle: false, //是否为圆形按钮
            //             tableContentButtonIcon: Edit, //图标组件
            //             tableContentButtonDisabled: false, //按钮是否为禁用状态
            //             tableContentButtonText: false, //是否为文字按钮
            //             tableContentButtonLink: false, //是否为链接按钮
            //             tableContentButtonBg: false, //是否显示文字按钮背景颜色
            //             tableContentButtonLoading: false, //是否为加载中状态
            //             tableContentButtonLoadingIcon: '', //自定义加载中状态图标组件
            //             tableContentButtonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色	
            //             tableContentButtonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
            //             tableContentButtonMainText: '修改', //按钮文字
            //             tableContentButtonClick: (val) => {
            //                 dialogObj.value.dialogVisible = true
            //                 dialogObj.value.dialogComponent = InstitutionalChildListEdit
            //                 dialogObj.value.dialogParams = {
            //                     id: val.row.id
            //                 }
            //                 dialogObj.value.dialogTitle = '修改'

            //             },
            //         },
            //         // {
            //         //     tableContentButtonType: 'danger', //按钮类型
            //         //     tableContentButtonPlain: false, //是否为朴素按钮
            //         //     tableContentButtonRound: false, //是否为圆角按钮
            //         //     tableContentButtonCircle: false, //是否为圆形按钮
            //         //     tableContentButtonIcon: Delete, //图标组件
            //         //     tableContentButtonDisabled: false, //按钮是否为禁用状态
            //         //     tableContentButtonText: false, //是否为文字按钮
            //         //     tableContentButtonLink: false, //是否为链接按钮
            //         //     tableContentButtonBg: false, //是否显示文字按钮背景颜色
            //         //     tableContentButtonLoading: false, //是否为加载中状态
            //         //     tableContentButtonLoadingIcon: '', //自定义加载中状态图标组件
            //         //     tableContentButtonColor: '', //自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色	
            //         //     tableContentButtonDark: '', //dark 模式, 意味着自动设置 color 为 dark 模式的颜色
            //         //     tableContentButtonMainText: '删除', //按钮文字
            //         //     tableContentButtonClick: (val) => {
            //         //         console.log(val)
            //         //         ElMessageBox.confirm(
            //         //             '请问是否确认删除?',
            //         //             '提示',
            //         //             {
            //         //                 confirmButtonText: '确认',
            //         //                 cancelButtonText: '取消',
            //         //                 type: 'warning',
            //         //             }
            //         //         ).then(() => {
            //         //             ElMessage({
            //         //                 type: 'success',
            //         //                 message: '确认删除',
            //         //             })
            //         //         }).catch(() => {
            //         //             ElMessage({
            //         //                 type: 'info',
            //         //                 message: '取消删除',
            //         //             })
            //         //         })
            //         //     },
            //         // },
            //     ],
            //     // tableIndex: (index) => { //如果设置了 type=index，可以通过传递 index 属性来自定义索引
            //     //     return index * 2
            //     // },
            //     // tableSelectable: [], //仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
            // },
        ],
        tableBorder: true, //是否带有纵向边框
        tableStripe: true, //是否为斑马纹 table
        tableRowClassName: ({ //自定义每一行的样式
            row,
            rowIndex,
        }) => {
            // if (rowIndex === 1) {
            //     return 'warning-row'
            // } else if (rowIndex === 3) {
            //     return 'success-row'
            // }
            return ''
        },
        // tableHeight: '500', //已经通过样式设置了flex=1，高度不用再设置  table 的高度。 默认为自动高度。 如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。
        // tableMaxHeight: '500', //已经通过样式设置了flex=1，高度不用再设置  table 的最大高度。 合法的值为数字或者单位为 px 的高度。
        tableHighlightCurrentRow: false, //是否要高亮当前行
        tableFit: true, //列的宽度是否自撑开
        tableShowHeader: true, //是否显示表头
        tableCurrentChange: (currentRow, oldCurrentRow) => { //当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性
            // console.log(currentRow)
            // console.log(oldCurrentRow)
        },
        tableRowDblclick: (row , column, event) => { //当某一行被双击时会触发该事件
            // console.log(row)
            // console.log(column)
            // console.log(event)
        },
        // tableDefaultSort: '', //默认的排序列的 prop 和顺序。 它的 prop 属性指定默认的排序的列，order 指定默认排序的顺序，例子{ prop: 'date', order: 'descending' }
        tableFormatter: (row, column) => { //它用于格式化指定列的值
            // return row.address
        },
        tableRowKey: '', //行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
        tableDefaultExpandAll: false, //是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
        tableShowSummary: false, //是否在表尾显示合计行
        // tableSummaryMethod: (val) => { //自定义的合计计算方法
        //     return ''
        // },
        // tableSpanMethod: ({ //合并行或列的计算方法
        //     row,
        //     column,
        //     rowIndex,
        //     columnIndex,
        // }) => {
        //     if (rowIndex % 2 === 0) {
        //         if (columnIndex === 0) {
        //             return [1, 2]
        //         } else if (columnIndex === 1) {
        //             return [0, 0]
        //         }
        //     }
        // },
        tableLayout: 'fixed', //设置表格单元、行和列的布局方式
        tableSelection: [], //选择项的值
        tableSelectionChange: (newSelection) => { //当选择项发生变化时会触发该事件
            tableObj.value.tableSelection = newSelection
            // console.log(tableObj.value.tableSelection)
        },
    })

    const paginationObj: Ref<any> = ref({
        paginationTotal: 0, //总条目数
        paginationPageSize: 100, //每页默认的条目个数，不设置时默认为10
        paginationCurrentPage: 1, //当前页数
        // paginationPageCount: 11, //总页数， total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性 
        paginationPageSizes: [100, 200, 300, 400], //展示的选择每页显示个数的选项，[100, 200, 300, 400] 表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。
        paginationSlotText: '', //slot文字内容
        paginationisShow: true, //是否显示
        paginationLayout: 'slot, total, sizes, prev, pager, next, jumper', //prev (上一页按钮), next (下一页按钮), pager (分页列表), jumper (跳转), total (总计), sizes (每页条数选择), slot(插槽) 和 -> (every element after this symbol will be pulled to the right).
        paginationPagerCount: 11, //设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠 
        paginationBackground: true,  //为分页按钮添加背景色
        paginationSize: 'default', //更改大小
        paginationDisabled: false, //禁用
        paginationHideOnSinglePage: false, //隐藏分页
        paginationDefaultCurrentPage: 1, //当前页数的默认初始值，不设置时默认为 1
        
        paginationSizeChange: (val: number) => { //处理页码大小
            // console.log(tabActiveName.value)
            // console.log(paginationObj.value.paginationCurrentPage)
            // console.log(paginationObj.value.paginationPageSize)
            // console.log(paginationObj.value.paginationTotal)
            tabelSearch()

        },
        paginationCurrentChange : (val: number) => { //当前页变动时候触发的事件
            // console.log(formDataNew.value)
            // console.log(tabActiveName.value)
            // console.log(paginationObj.value.paginationCurrentPage)
            // console.log(paginationObj.value.paginationPageSize)
            // console.log(paginationObj.value.paginationTotal)
            tabelSearch()
        },
    
    })
    // 根据条件查询列表
    const tabChange = (val) => {
        // 根据下面两个值查就行
        // console.log(formDataNew.value)
        // console.log(tabActiveName.value)
        // console.log(paginationObj.value.paginationCurrentPage)
        // console.log(paginationObj.value.paginationPageSize)
        // console.log(paginationObj.value.paginationTotal)
        tabelSearch()
    }
    // 根据条件查询列表
    const tabelSearch = (val ?: any) => {
        isLoading.value = true
        // 调接口 tabActiveName如果有也要加上
        welfareorgsGetWelfareOrgsListApi({
            pageNo: paginationObj.value.paginationCurrentPage,
            pageSize: paginationObj.value.paginationPageSize,
            notNeedPage: false,
            sortDir: '', //排序方式：ascending,descending
            sortField: '', //排序字段
            ...formDataOriginal.value
        }).then((res: any) => {
            paginationObj.value.paginationTotal = res.data.totalElements
            tableObj.value.tableData = res.data.content
        }).catch(err => {
            // ElMessage.closeAll()
            // ElMessage({
            //     type: 'error',
            //     message: '系统异常，请稍后重试！',
            // })
        }).finally(() => {
            isLoading.value = false
        })
    }
    onMounted(async() => {
        tabelSearch()
    })

</script>

<style lang="scss" scoped>
    .comprehensiveTabel {
        @include general-tabel-box;
    }
</style>